<template>
  <div>
    <div   style="width:80%; margin:0 auto">
      <div style="height:20px;"></div>
      <div style="display: flex">
        <div style=" line-height:30px; height:30px; border-left:5px solid #2caf2c; font-size:25px;
            font-weight:bold; padding-left:5px; margin:20px 20px">论坛空间</div>
      </div>
      <div style="height:3px; background-color:green; margin-bottom:10px"></div>
      <div class="card" style="margin-bottom: 13px;">
        <el-input clearable @clear="load" style="width:240px; padding-right:5px" v-model="data.title"
                  :prefix-icon="Search" placeholder="请输入贴子标题查询"></el-input>
        <el-select v-model="data.viewData.categoryId" placeholder="请选择贴子分类" @clear="load"
                   style="width: 240px">
          <el-option
              v-for="item in data.categoryData"
              :key="item.id"
              :label="item.title"
              :value="item.id"
          />
        </el-select>
        <el-button type="primary" @click="loadForum" style="margin-left: 10px">查 询</el-button>
        <el-button type="danger" @click="reset">重 置</el-button>
      </div>
      <div style="display: flex; grid-gap: 20px; background-color:#d8e3db; margin-top:5px;" v-for="item in data.forumData" :key="item">
        <div style="flex: 1;">
          <img :src="item.img" alt="" @click="handleToForum('/front/forumdetail?id=' + item.id)" style="width:100%; height:200px; cursor: pointer"/>
        </div>
        <div style="flex: 3;">
          <div style="font-size:20px; font-weight:bold; margin-bottom:3px; flex:4; cursor: pointer"
               @click="handleToForum('/front/forumdetail?id=' + item.id)"
          >{{ item.title }}</div>
          <div style="display: flex; color:#4ca34c">
            <span>贴子分类：</span>
            {{ item.categoryTitle }}</div>
          <div style="display:flex; margin-top:5px;">
            <img :src="item.userAvatar" alt=""  style="width:20px; height:20px; border-radius:50%;"/>
            <div style="margin-left:5px">
                <span class="clickable-text" @click="handleUserClick(item.userId)">
                  {{ item.userName }}
                </span>
            </div>
            <div style="margin-left:5px; font-size:10px; color:#988888">{{item.time}}</div>
          </div>
          <div class="line4" style="margin-top:5px; text-align: justify;">{{ item.description }}</div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import {reactive} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import {Search} from "@element-plus/icons-vue";

const data = reactive({
  user: JSON.parse(localStorage.getItem('code_user') || '{}'),
  forumData: {},
  title: null,
  viewData: {},
  categoryData:[],
})

const loadForum = () => {
  request.get("/written/selectByStatus2",{
    params:{
      title: data.title,
      categoryId: data.viewData.categoryId,
    }
  }).then(res => {
    if (res.code === '200') {
      data.forumData = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })
}
loadForum()

const reset = () => {
  data.title = null;
  data.viewData.categoryId = null;
  loadForum()
}

const loadCategory = () => {
  request.get('/category/selectAll').then(res => {
    if (res.code === '200') {
      data.categoryData = res.data
    }else{
      ElMessage.error(res.msg)
    }
  })
}
loadCategory()

const handleUserClick = (row) => {
  const userId = String(row)
  router.push({ path: `/front/otherperson/${userId}`})
}

const handleToForum = (url) => {
  setInterval(() => {
    location.href = url
  }, 500)
}
</script>

<style scoped>
.card{
  background-color: #c9c9da;
}
.line4 {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;/*超出多少行省略*/
  overflow: hidden;
}
.clickable-text {
  color: #409eff;
  cursor: pointer;
  text-decoration: underline;
}
.clickable-text:hover {
  color: #3375b9;
}
</style>